import React from "react";
import stys from "./UnCarRiskMomenyModel.module.scss";
import XxtvCard from "../card/xxtv-card";
import AntdProgress from "@/antd/Progress/Porgress";


const ProgressInfo = ({ percent = 0.00 }) => {
    return (
        <>
            <div className={stys.progressContent}>
                <div className="item value">
                    <span className="text">{percent}</span>
                    <span className="prent">%</span>
                </div>
                <div className="item label">达成率</div>
            </div>
        </>
    )
}

const UnCarRiskMomenyModel = ({
    style,
    noCarSumPremium = 0,
    targetNoCarSumPremium = 0,
}) => {
    return (
        <>
            <XxtvCard
                title="非车险保费（万元）"
                style={{ ...style }}
            >
                <div className={stys.box}>
                    <div className="circle-box">
                        <AntdProgress
                            size={[180, 20]}
                            percent={targetNoCarSumPremium === 0 ? 0.00 : (noCarSumPremium / targetNoCarSumPremium * 100).toFixed(2)}
                            strokeLinecap="round"
                            format={() => <ProgressInfo
                                percent={targetNoCarSumPremium === 0 ? 0.00 : (noCarSumPremium / targetNoCarSumPremium * 100).toFixed(2)}
                            />}
                        />
                    </div>
                    <div className="content">
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">{noCarSumPremium.toFixed(2)}</div>
                                <div className="label">实际保费</div>
                            </div>
                        </div>
                        <div className="text-item">
                            <div className="text-content">
                                <div className="value">{targetNoCarSumPremium.toFixed(2)}</div>
                                <div className="label">目标保费</div>
                            </div>
                        </div>
                    </div>
                </div>
            </XxtvCard>
        </>
    )
}
export default UnCarRiskMomenyModel;